<!--
 * @Descriptin: 添加权限
 * @Version: 0.1
 * @Autor: boide gui
 * @Date: 2020-12-21 16:16:31
 * @LastEditors: guiyi@hongyi.tech
 * @LastEditTime: 2022-02-17 17:33:01
-->
<template>
	<el-card class="box-card">
    <div class="table role_con table-height">
      <div class="role_box">
        <!-- 表格头 -->
        <div class="role_check_title">
          <div class="title-module">菜单名</div>
          <div class="title-auth">权限</div>
        </div>
        <!-- 列表 -->
        <div class="role_table" v-loading="listLoading">
          <div v-for="item in authList" v-show="(item.permissions&&item.permissions.length)" :key="item.id" class="role_table_item">
            <!-- 模块 -->
            <div class="role_directory">
              <el-checkbox :disabled="!(item.permissions&&item.permissions.length)" class="right" :value="checkModule(item)" :false-label="0" :true-label="1" @change="changeModule(item)">{{item.menuName}}</el-checkbox>
            </div>
            <!-- 权限 -->
            <template v-if="item.permissions">
              <div class="role_mb">
                <!-- 权限 -->
                <div v-for="menu in item.permissions" :key="menu.id" class="role_menu_box">
                  <div class="role_menu">
                    <el-checkbox :value="checkMenu(menu.id)" :false-label="0" :true-label="1" @change="changeMenu(menu)">{{menu.name}}</el-checkbox>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <!-- 全选 -->
        <div class="role_check_all">
          <div class="all-check">
            <el-checkbox class="right" v-model="checkAll" :false-label="0" :true-label="1" @change="changeAll()">全选</el-checkbox>
          </div>
          <div class="all-btn">
            <el-button style="width: 140px;" :loading="repeatShow" type="primary" @click="submitRole">保存</el-button>
            <el-button style="width: 140px;" @click="$store.dispatch('tagsView/delView', $route);$router.go(-1)">返回</el-button>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import { permissionModulesAndPermissions } from "@/api/system/auth"
import { rolePermissionIds, roleUpdatePermissionsFromRole } from '@/api/system/role'
import { getIntersection, getUnion, oneDimensionalArray } from '@/utils/tools'
export default {
  name: 'addRole',
  data () {
    return {
      checkAll: 0,
      listLoading: true,
      roleFrom: {},
      repeatShow: false,
      authList: []
    }
  },
  created () {
    this.$nextTick(() => {
      this.initData()
    })
  },
  computed: {
    checkMenu() {
      return (id) => {
        const { permissionIds = [] } = this.roleFrom
        return permissionIds.includes(id) ? 1 : 0
      }
    },
    checkModule() {
      return (module) => {
        const { permissionIds = [] } = this.roleFrom
        const authIds = module.permissions.map(o => o.id)
        return getIntersection(permissionIds, authIds).length===authIds.length ? 1 : 0
      }
    }
  },
  methods: {
    // 初始化
    async initData () {
      let { params: { id } } = this.$route
      if (id) {
        await this.getRoleInfo(id)
      }
      await this.getRoleAuth()
    },
    // 获取角色详情
    async getRoleInfo (id) {
      const { data: permissionIds } = await rolePermissionIds(id)
      this.roleFrom = { id, permissionIds }
    },
    // 获取菜单信息
    async getRoleAuth() {
      const data = await permissionModulesAndPermissions()
      if (data.code === 0) {
        this.listLoading = false
        this.authList = data.data
        let permissionIds = oneDimensionalArray(this.authList.map(o => [...o.permissions.map(a => a.id)]))
        this.checkAll = permissionIds.length === this.roleFrom.permissionIds.length ? 1 : 0
      }
    },
    // 重置
    resetRole () {
      this.roleFrom = {}
      this.checkAll = 0
    },
    // 提交
    submitRole () {
      this.repeatShow = true
      roleUpdatePermissionsFromRole(this.roleFrom).then(res => {
        if (res.code === 0) {
          this.repeatShow = false
          this.$message.success('分配成功')
          setTimeout(() => {
            this.resetRole()
            this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.go(-1)
          }, 1000);
        }
      })
    },
    // 全选
    changeAll () {
      if (!this.checkAll) {
        this.$set(this.roleFrom, 'permissionIds', [])
        return
      }
      let permissionIds = []
      this.authList.forEach(module => {
        module?.permissions.forEach(auth => {
          permissionIds.push(auth.id)
        })
      })
      this.$set(this.roleFrom, 'permissionIds', permissionIds)
    },
    // 点击模块
    changeModule(module) {
      const { permissionIds } = this.roleFrom
      const authIds = module.permissions.map(o => o.id)
      if (getIntersection(permissionIds, authIds).length!==authIds.length) {
        this.$set(this.roleFrom, 'permissionIds', getUnion(permissionIds, authIds))
      } else {
        authIds.forEach(id => {
          const index = permissionIds.findIndex(o => o===id)
          this.roleFrom.permissionIds.splice(index, 1)
        })
      }
    },
    // 点击权限
    changeMenu(menu) {
      const { permissionIds } = this.roleFrom
      const index = permissionIds.findIndex(o => o===menu.id)
      if (index!==-1) {
        this.roleFrom.permissionIds.splice(index, 1)
      } else {
        this.$set(this.roleFrom, 'permissionIds', [...permissionIds, menu.id])
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.role-btn{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.el-checkbox{
  &.right{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    ::v-deep.el-checkbox__input{
      padding-top: 3px;
    }
    ::v-deep.el-checkbox__label{
      padding-left: 0;
      padding-right: 10px;
    }
  }
}
.role_con {
  background-color: #ffffff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  .role_box{
    .role_check_title{
      height: 46px;
      line-height: 46px;
      display: flex;
      border-bottom: 1px solid rgba(35, 35, 35, 0.15);
      font-weight: bold;
      .title-module{
        padding-right: 16px;
        width: 168px;
        border-right: 1px solid rgba(35, 35, 35, 0.15);
        display: flex;
        justify-content: center;
      }
      .title-auth{
        display: flex;
        flex: 1;
        justify-content: center;
      }
    }
    .role_check_all{
      height: 46px;
      line-height: 46px;
      display: flex;
      .all-check{
        padding-right: 16px;
        width: 168px;
        border-right: 1px solid rgba(35, 35, 35, 0.15);
        display: flex;
        justify-content: flex-end;
      }
      .all-btn{
        margin-left: 20px;
      }
    }
    .role_table{
      background: #fff;
      .role_table_item{
        line-height: 46px;
        border-bottom: 1px solid rgba($color: #232323, $alpha: 0.15);
        overflow: hidden;
        display: flex;
        .role_directory{
          min-height: 46px;
          float: left;
          width: 168px;
          border-right: 1px solid rgba($color: #232323, $alpha: 0.15);
          padding-right: 16px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }
        .role_mb{
          display: flex;
          flex-direction: row;
          flex: 1;
          flex-wrap: wrap;
          padding: 10px 0;
          .role_menu_box{
            overflow: hidden;
            display: flex;
            width: 220px;
            line-height: 32px;
            .role_menu{
              float: left;
              padding-left: 16px;
            }
          }
        }
      }
    }
  }
}
</style>
